<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert title="注意：只允许为第三级分类设置相关参数！"
                type="warning"
                show-icon
                :closable="false">
      </el-alert>
      <el-row class="cateopt">
        <el-col>
          <span>选择商品分类：</span>
          <el-cascader v-model="selectdParamKeys"
                       :options="cateList"
                       :props="cascaderProps"
                       @change="handleChange"></el-cascader>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-tabs v-model="activeName"
                   @tab-click="handleClick">
            <el-tab-pane label="动态参数"
                         name="many">
              <el-button type="primary"
                         size="mini"
                         :disabled="isDisabled">添加参数</el-button>
              <el-table :data="dynamicParams"
                        style="width: 100%"
                        border
                        stripe>
                <el-table-column type="expand"></el-table-column>
                <el-table-column type="index"
                                 label="ID"></el-table-column>
                <el-table-column prop="attr_name"
                                 label="参数名称">
                </el-table-column>
                <el-table-column label="操作">
                  <el-button type="primary"
                             icon="el-icon-edit"
                             size="mini">编辑</el-button>
                  <el-button type="warning"
                             icon="el-icon-delete"
                             size="mini">删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态属性"
                         name="only">
              <el-button type="primary"
                         size="mini"
                         :disabled="isDisabled">添加属性</el-button>
              <el-table :data="staticParams"
                        style="width: 100%"
                        border
                        stripe>
                <el-table-column type="index"
                                 label="ID"></el-table-column>
                <el-table-column prop="attr_name"
                                 label="参数名称">
                </el-table-column>
                <el-table-column label="操作">
                  <el-button type="primary"
                             icon="el-icon-edit"
                             size="mini">编辑</el-button>
                  <el-button type="warning"
                             icon="el-icon-delete"
                             size="mini">删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cateList: [],
      selectdParamKeys: [],
      cascaderProps: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      activeName: 'many',
      dynamicParams: [],
      staticParams: []
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    async getCateList () {
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) {
        return this.$message.error('获取参数失败')
      }
      this.cateList = res.data
    },
    handleChange () {
      //当长度为三时说明选择的三级分类
      if (this.selectdParamKeys.lenth !== 3) {
        this.selectdParamKeys = []
        this.getParams()
      }
    },
    handleClick () {
      this.getParams()
    },
    async getParams () {
      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, { params: this.activeName })
      if (res.meta.status) {
        this.$message.error('获取参数失败')
      }

      if (this.activeName === 'many') {
        this.dynamicParams = res.data
      } else {
        this.staticParams = res.data
      }
    }
  },
  computed: {
    isDisabled () {
      if (this.selectdParamKeys.length !== 3) {
        return true
      }
      return false
    },
    cateId () {
      if (this.selectdParamKeys.length === 3) {
        return this.selectdParamKeys[2]
      }
      return null
    }
  }
}
</script>

<style lang="less" scoped>
.cateopt {
  margin: 15px 0;
}
</style>
